<template>
	<div class="app-container approve-item" v-loading="loading">
		<el-form ref="form" :model="form" label-width="80px">
			<el-row>
				<el-col :span="24">
					<el-form-item label="申请账号" prop="approver">
						<el-input v-model="form.userName" readonly />
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="申请原因" prop="applyReason">
						<el-input type="textarea" v-model="form.applyReason" readonly />
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="申请详情" prop="realname">
						<el-table :data="form.list" border>
							<el-table-column label="表单名称" prop="tableName" align="center"></el-table-column>
							<el-table-column label="表单名称(数据库)" prop="tableAlias" align="center"></el-table-column>
							<el-table-column label="所属部门" prop="deptName" align="center"></el-table-column>
							<el-table-column label="安全等级" prop="safeLevel" align="center"></el-table-column>
							<el-table-column label="申请类型" prop="accessType" align="center">
								<template slot-scope="scope">
									<span v-if="scope.row.accessType==1">只读</span>
									<span v-if="scope.row.accessType==2">可读可导出</span>
									<span v-if="scope.row.accessType==3">内容编辑</span>
									<span v-if="scope.row.accessType==4">元数据编辑</span>
									<span v-if="scope.row.accessType==5">管理</span>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
			</el-row>

		</el-form>

		<div style="text-align: center; margin:20px 0">
			<template v-if="form.status==2">
				<el-button type="primary" style="margin-right:10px;" @click="handleAudit(1)">通过</el-button>
				<el-popover placement="top" width="356" v-model="rejectVisible">
					<p style="text-align: center;">备注</p>
					<el-input type="textarea" placeholder="填写驳回原因" v-model="comment" :autosize="{ minRows: 6}"></el-input>
					<div style="text-align: center; margin:20px 0 0">
						<el-button type="primary" @click="handleAudit(0)">确定</el-button>
						<el-button type="info" @click="rejectVisible=false">取消</el-button>
					</div>
					<el-button slot="reference">驳回</el-button>
				</el-popover>
				<el-button style="margin-left:10px;" @click="reback(1)">返回</el-button>
			</template>
			<template v-else>
				<el-button type="info" v-if="form.status==0" disabled>已驳回</el-button>
				<el-button type="info" v-else-if="form.status==1" disabled>已通过</el-button>
				<el-button style="min-width:84px;" @click="reback">返回</el-button>
			</template>
		</div>
	</div>
</template>

<script>
	import { getApply, auditApply } from "@/api/dataManagement/system/apply";
	export default {
		data() {
			return {
				// 表单参数
				form: {},
				rejectVisible: false,
				comment: '',
				loading: false
			}
		},
		created() {
			this.getApplyItem()
		},
		methods: {
			getApplyItem() {
				if (this.loading) return false
				this.loading = true
				getApply(this.$route.query.id).then(res => {
					this.form = res.data
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			handleAudit(status) {
				let params = {
					id: Number(this.form.id),
					status: Number(status)
				}
				if (status == 0) {
					params.comment = this.comment
				}
				if (this.loading) return false
				this.loading = true
				// console.log("信息：", params)
				auditApply(params).then(res => {
					if (res.code == 200) {
						this.msgSuccess("操作成功");
						this.comment = ''
						let view = { ...this.$route }
						this.$store.dispatch('tagsView/delView', view).then(() => { })
						this.$router.push('/DMS/system/approve')
					}
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			// 返回
			reback(arg) {
				if (arg == 1) {
					this.$router.push({ path: '/DMS/system/approve' })
				} else {
					this.$router.push({ path: '/DMS/system/approve', query: { type: 'history' } })
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.approve-item {
		padding: 50px 70px;
	}
</style>